Un ejemplo:
function App() { const [user, setUser] = React.useState({ name: '', surname: '' }); const handleChange = e => { setUser(prev => ({...prev, [e.target.name]: e.target.value})); }; return ( <div className="App"> <form onChange={handleChange}> <input type="text" name="name" placeholder="name" value={user.name} /> <input type="text" name="surname" placeholder="surname" value={user.surname} /> </form> </div> ); } ReactDOM.createRoot(document.querySelector('.react')).render(<App />); <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div class='react'></div>Y recibo estas advertencias:
Advertencia: proporcionó una propiedad de
valuea un campo de formulario sin un controladoronChange. Esto generará un campo de solo lectura. Si el campo debe ser mutable, usedefaultValue. De lo contrario, establezcaonChangeoreadOnly.
¿Debería simplemente ignorarlos?
Técnicamente, no hay nada malo en su código. Entonces sí, puede ignorar los registros de forma segura.
Sin embargo, la delegación de eventos no es la "manera de reaccionar" para lidiar con los estados de los formularios, por lo que no podrá deshacerse de esas advertencias.
En mi humilde opinión, no es una buena experiencia de desarrollo, por lo que podría simplemente agregar onChange={handleChange} a cada campo en lugar de configurar onChange en el formulario. Supongo que el sistema de eventos React está lo suficientemente optimizado como para no tener que delegar eventos, incluso si en su caso de uso fue bastante conveniente y elegante.
Su OnChange debe estar en las entradas y no en el formulario, aquí hay un ejemplo:
<input type="text" name="name" placeholder="name" value={user.name} onChange={handleChangeName}/> <input type="text" name="surname" placeholder="surname" value={user.surname} onChange={handleChangeSurName}/>y este es el mango cambio de nombre
const handleChangeName = (e) => { setUser(userInfo => {...userInfo, ['name']: e.target.value}) }Debido a que no tiene onChange en sus entradas, genera esta alerta.